<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/plugins/sweetalert2/sweetalert2.min.css">
    <!-- 自写主界面代码 -->
    <link rel="stylesheet" href="/my_works/css/admin_main.css">
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>

<body>
    <!-- 展示学生成绩的模态框 -->
    <div class="modal fade" id="showScoreModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">成绩展示</h4>
                </div>
                <div class="modal-body">
                    <p>主要内容</p>
                    <table class="table" id="studentScoreTable">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">no</th>
                                <th scope="col">姓名</th>
                                <th scope="col">课程名</th>
                                <th scope="col">任课教师</th>
                                <th scope="col">成绩</th>


                            </tr>
                        </thead>
                        <tbody id="studentScoreTableBody">
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="row Container">
        <div class="col-md-5"></div>
        <h2>查询成绩</h2>

        <!-- 主要区域 教师表 -->
        <table class="table col-md-12" id="teacher-table"></table>

        <!-- ./col -->
    </div>




    <!-- jQuery -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/plugins/toastr/toastr.min.js"></script>
    <script src="/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- 引入axios -->
    <script src="/plugins/axios/axios.min.js"></script>
    <!-- 引入自写js -->
    <script src="/my_works/js/teacher_manage.js"></script>
    <script src="/my_works/common/common.js"></script>
    <script>




        //查询学生成绩信息
        selectStudentInfo = () => {
            let id = localStorage.getItem("id");
            //调用成绩展示模态框展示数据
            $("#showScoreModal").modal("show");
            axios({
                url: "/api/student/score/id?id=" + id,
                method: "GET",
            }).then((res) => {
                // console.log(res.data);
                //清除所有子元素
                $("#studentScoreTableBody").empty()

                res.data.data.forEach((data) => {
                    //添加表格子项
                    html = $("<tr>"
                        + "<td>" + data.no + "</td>"
                        + "<td>" + data.name + "</td>"
                        + "<td>" + data.课程名 + "</td>"
                        + "<td>" + data.任课教师 + "</td>"
                        + "<td>" + data.成绩 + "</td>"
                        + "</tr>")
                    console.log(data);
                    $("#studentScoreTableBody").append(html)
                    $("#addChoseCourse").click(() => {
                        selectNotChoseCourse(data.no);
                    })
                })

            })
        }
        selectStudentInfo()
    </script>
</body>

</html>